<template>
  <div class="tree-select">
    <el-input
      v-model="treeSelectLabel"
      @focus="showOrHide($event)"
      :placeholder="placeholder"
      clearable
      @clear="clear"
    >
      <i @click="showOrHide($event)" slot="suffix" :class="['el-input__icon',suffixIcon]"></i>
    </el-input>
    <!-- <el-collapse-transition> -->
    <div v-show="showContent" class="tree-select-content">
      <el-tree
        :data="treeData"
        :show-checkbox="multiple"
        node-key="id"
        default-expand-all
        highlight-current
        :props="defaultProps"
        :expand-on-click-node="false"
        @node-click="nodeClick"
      ></el-tree>
    </div>
    <!-- </el-collapse-transition> -->
  </div>
</template>

<script>
export default {
  props: {
    placeholder: {
      type: String,
      default: "请选择"
    },
    multiple: {
      type: Boolean,
      default: false
    },
    autoLoad: {
      type: Boolean,
      default: true
    },
    defaultProps: {
      type: Object,
      default() {
        return {
          label: "name",
          children: "children",
          disabled: "disabled"
        };
      }
    },
    url: {
      type: String,
      default: ""
    },
    param: {
      type: Object,
      default() {
        return {};
      }
    },
    value: {
      type: [String, Number],
      default: ""
    },
    defaultShowLabel: {
      type: String,
      default: ""
    }
  },
  watch: {
    defaultShowLabel: {
      immediate: true,
      handler(val) {
        this.treeSelectLabel = val;
      }
    },
    value: {
      immediate: true,
      handler(val) {
        this.treeSelectValue = val;
        this.selectLabel();
        this.$emit("input", this.treeSelectValue);
      }
    }
  },
  data() {
    let me = this;
    return {
      showContent: false,
      suffixIcon: "el-icon-arrow-down",
      treeData: [],
      simpleData: [],
      treeSelectValue: "",
      treeSelectLabel: ""
    };
  },
  created() {
    if (this.autoLoad) {
      this.loadData();
    }
  },
  mounted() {
    let me = this;
    window.onclick = e => {
      if (e.target.className != "el-input__inner") {
        if (me.showContent) {
          me.showContent = false;
          me.suffixIcon = "el-icon-arrow-down";
        }
      }
    };
  },
  methods: {
    clear() {
      this.treeSelectLabel = "";
      this.treeSelectValue = "";
      this.$emit("input", this.treeSelectValue);
    },
    loadData() {
      let me = this;
      if (!me.url) {
        console.log("tree-select 未配置查询接口地址");
        return;
      }
      me.$http.ajax({
        url: me.url,
        data: me.param,
        success: res => {
          me.treeData = res;
          me.$nextTick(() => {
            me.treeData.forEach(item => {
              if (item.children && item.children.length > 0) {
                me.buildSimpleData(item.children);
              }
              me.simpleData.push(item);
            });
            me.selectLabel();
          });
        }
      });
    },
    selectLabel() {
      let me = this;
      let findParent = me.simpleData.find(item => {
        return item.id == me.value;
      });
      console.log(findParent);
      if (findParent) {
        me.treeSelectLabel = findParent[me.defaultProps.label];
      } else {
        me.treeSelectLabel = "根节点";
      }
    },
    buildSimpleData(children) {
      let me = this;
      children.forEach(item => {
        if (item.children && item.children.length > 0) {
          me.buildSimpleData(item.children);
        }
        me.simpleData.push(item);
      });
    },
    showOrHide(e) {
      if (e) {
        e.stopPropagation();
      }
      this.showContent = !this.showContent;
      this.suffixIcon = !this.showContent
        ? "el-icon-arrow-down"
        : "el-icon-arrow-up";
    },
    nodeClick(data, node, component) {
      if (!this.multiple) {
        this.treeSelectLabel = data[this.defaultProps.label];
        this.treeSelectValue = data.id;
        this.$nextTick(() => {
          this.$emit("input", this.treeSelectValue);
          this.showOrHide();
        });
        // this.$emit("node-click", this.treeSelectValue);
      }
    }
  }
};
</script>

<style scoped>
.tree-select {
  position: relative;
}
.tree-select .tree-select-content {
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  z-index: 99999;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px;
}
</style>
